<template>
	<view class="recharge">
		<view class="list dFlex jAround_aCenter fWap">
			<view :class="['priceOne',actId == item.id ? 'active' : '']" @click='changeRecharge(item);' v-for="(item,index) in config" :key='item.id'>
				<view class="price">{{item.recharge_money}}元</view>
				<view class="desc">售价：{{item.sale_money}}元</view>
			</view>
		</view>
		<view class="desc">
			<view class="title">充值权益</view>
			<view class="content">{{prize?prize:'暂未填写'}}</view>
			<view class="btn" @click="recharge">立即充值</view>
		</view>
	</view>
</template>

<script>
	import {
		getViperSetting,doRecharge,VipOrderPay
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				config:[],
				prize:'',
				actId:'',
			};
		},
		onShow(){
			this.initConfig();
		},
		methods:{
			// 充值配置
			async initConfig(){
				let res = await getViperSetting({});
				console.log(res);
				if(res){
					this.config = res.length ? res : [];
					this.actId = res.length ? res[0].id : '';
					this.prize = '';
					if(res[0].couponlists.length){
						this.prize = '充值赠送 ';
						res[0].couponlists.forEach((item,index)=>{
							this.prize = this.prize + item.title + item.send_num +'张 ';
						})
					}
				}
			},
			// 切换充值
			changeRecharge(item){
				this.actId = item.id;
				this.prize = '';
				if(item.couponlists.length){
					this.prize = '充值赠送 ';
					item.couponlists.forEach((item,index)=>{
						this.prize = this.prize + item.title + item.send_num +'张 ';
					})
				}
			},
			// 充值
			async recharge(){
				if(!this.actId){
					uni.showToast({
						title:'请选择充值金额',
						icon:"none"
					})
					return
				}
				let res = await doRecharge({
					vs_id:this.actId,
				});
				console.log(res);
				if(res){
					//res.id
					let res2 = await VipOrderPay({
						oid:res.id,
					});
					if(res2){
						uni.requestPayment({
							provider:'wxpay',
							timeStamp:res2.info.timeStamp,
							nonceStr:res2.info.nonceStr,
							package:res2.info.package,
							signType:res2.info.signType,
							paySign:res2.info.paySign,
							success: () => {
								uni.showToast({
									title:'充值成功',
									icon:"success"
								})
							},
							fail:(err)=>{
								console.log(err);
								uni.showToast({
									title:'充值失败',
									icon:"none"
								})
							}
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.recharge{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		>.desc{
			width:100%;
			background:white;
			padding:0 12px 12px;
			box-sizing: border-box;
			.btn{
				width:100%;
				color:white;
				border-radius: 50px;
				text-align: center;
				padding: 8px 0;
				background: linear-gradient(180deg, #3E8EF0 0%, #1362C9 100%);
			}
			.content{
				width:100%;
				min-height: 80px;
				margin: 10px 0;
			}
			.title{
				padding:12px 0;
				font-weight: bold;
			}
		}
		.list{
			width:100%;
			margin-bottom: 12px;
			.priceOne{
				width:31%;
				padding:6px 0;
				border-radius: 5px;
				background: #E5E5E5;
				color:#808080;
				text-align:center;
				.price{
					font-size: 16px;
					margin-bottom: 3px;
				}
			}
			.active{
				background: #1362C9;
				color:white!important;
			}
		}
	}
</style>
